import React, { useState } from "react";
import "./index.css";
import { Form, Input, Button, Divider } from "antd-mobile";
import backImg from "../../assets/icon/common_icon_back_white_n.png";
import LoginCss from "../../../components/pages/User/LoginCss";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [users, setUsers] = useState({
    email: "",
    code: "",
  });
  const onSubmit = () => {
    console.log(users);
  };
  return (
    <div className="user_login_box">
      <div className="login_top_box">
        <img src={backImg} onClick={() => navigate(-1)} alt="" />
        <span className="title">忘记密码</span>
        <span></span>
      </div>

      <div className="loginmiddlw">
        <LoginCss>
          <div className="content">
            <Form layout="horizontal" form={form}>
              <Form.Item
                name="username"
                extra={
                  <div>
                    <Button size="mini" color="primary">
                      获取验证码
                    </Button>
                  </div>
                }
              >
                <Input
                  placeholder="请输入邮箱"
                  onChange={(e) =>
                    setUsers({
                      ...users,
                      email: e,
                    })
                  }
                />
              </Form.Item>
              <Form.Item name="passwprd">
                <Input
                  placeholder="请输入密码"
                  onChange={(e) =>
                    setUsers({
                      ...users,
                      code: e,
                    })
                  }
                />
              </Form.Item>
            </Form>
          </div>
        </LoginCss>
      </div>
      <div className="login_bot">
        <Button block fill="none" onClick={onSubmit} size="large">
          下一步
        </Button>
      </div>
    </div>
  );
};

export default Index;
